<template>
  <div class="official-website">
    <!-- 导航栏 -->
    <header class="header" :class="{ 'header-scrolled': isScrolled, 'header-hidden': isHeaderHidden }">
      <div class="container">
        <div class="logo">
          <img src="@/assets/home/huaylogo.png" alt="华衣甄选平台" />
          <h1>华衣甄选平台</h1>
        </div>
        <nav class="nav">
          <ul>
            <li v-for="item in navItems" :key="item.id">
              <a :href="'#' + item.id" :class="{ active: currentSection === item.id }">{{ item.name }}</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- 主区域 -->
    <section class="hero" id="home">
      <div class="container">
        <div class="hero-content">
          
          
          <!-- 多平台展示 -->
          <div class="platforms-display">
            <div class="mobile-section" style="display: flex; gap: 30px; margin-bottom: 40px; justify-content: center;">
              <div class="platform-item phone-display" style="flex: 0 0 280px;">
                <div class="platform-content phone-border">
                  <video class="platform-video" autoplay muted loop playsinline disablePictureInPicture>
                    <source src="@/assets/home/视频1.mp4" type="video/mp4">
                    您的浏览器不支持视频播放
                  </video>
                  <div class="platform-text">
                    <h4>小程序端</h4>
                    <p>随时随地体验汉服文化</p>
                  </div>
                </div>
              </div>
              
              <div class="platform-item intro-display" style="flex: 1; min-width: 300px;">
                <div class="platform-content" style="height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 20px 30px; background-color: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);">
                  <h3 style="font-size: 24px; color: #3E4F67; margin-bottom: 15px;">华衣甄选小程序</h3>
                  <div style="margin-bottom: 20px;">
                    <p style="margin-bottom: 10px; color: #555; line-height: 1.6;">华衣甄选小程序为您提供便捷的汉服体验服务，支持在线浏览、预约体验和专业摄影服务。</p>
                    <p style="margin-bottom: 10px; color: #555; line-height: 1.6;">通过我们的平台，您可以轻松找到附近的汉服体验门店，了解各类汉服的历史文化，并享受一站式的汉服体验服务。</p>
                  </div>
                  
                  <div style="display: flex; flex-wrap: wrap; gap: 15px;">
                    <div style="flex: 1; min-width: 120px; display: flex; align-items: center;">
                      <div style="width: 40px; height: 40px; border-radius: 8px; background-color: rgba(139, 69, 19, 0.1); display: flex; justify-content: center; align-items: center; margin-right: 10px;">
                        <span style="color: #3E4F67; font-size: 20px;">①</span>
                      </div>
                      <div>
                        <p style="font-weight: 500; color: #333;">在线预约</p>
                      </div>
                    </div>
                    <div style="flex: 1; min-width: 120px; display: flex; align-items: center;">
                      <div style="width: 40px; height: 40px; border-radius: 8px; background-color: rgba(139, 69, 19, 0.1); display: flex; justify-content: center; align-items: center; margin-right: 10px;">
                        <span style="color: #3E4F67; font-size: 20px;">②</span>
                      </div>
                      <div>
                        <p style="font-weight: 500; color: #333;">汉服体验</p>
                      </div>
                    </div>
                    <div style="flex: 1; min-width: 120px; display: flex; align-items: center;">
                      <div style="width: 40px; height: 40px; border-radius: 8px; background-color: rgba(139, 69, 19, 0.1); display: flex; justify-content: center; align-items: center; margin-right: 10px;">
                        <span style="color: #3E4F67; font-size: 20px;">③</span>
                      </div>
                      <div>
                        <p style="font-weight: 500; color: #333;">专业摄影</p>
                      </div>
                    </div>
                  </div>
                  
                  <div style="display: flex; justify-content: center; margin-top: 50px;">
                    <div class="qrcode-container" style="position: relative; width: 150px; height: 150px;">
                      <img src="@/assets/home/1f9f8841cfefc09988f8e65f14c0150.png" alt="小程序二维码" class="qrcode" style="width: 100%; height: 100%; display: block; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);" />
                      <div class="scan-animation">
                        <div class="scan-line"></div>
                      </div>
                    </div>
                  </div>
                  
                  <div style="text-align: center; margin-top: 10px;">
                    <p style="color: #5D89BA; font-size: 14px;">微信扫码立即体验</p>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 商家管理系统 -->
            <div class="admin-section" style="background: white; border-radius: 15px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); padding: 30px; margin-top: 10px; margin-bottom: 30px;">
              <div style="display: flex; flex-wrap: wrap; gap: 30px; align-items: center;">
                <!-- 左侧视频展示 - 垂直居中 -->
                <div style="flex: 0 0 350px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                  <div class="mac-frame" style="width: 100%; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);">
                    <div class="mac-top-bar">
                      <div class="mac-buttons">
                        <span class="mac-button red"></span>
                        <span class="mac-button yellow"></span>
                        <span class="mac-button green"></span>
                      </div>
                    </div>
                    <video class="platform-video" autoplay muted loop playsinline disablePictureInPicture style="width: 100%; height: auto;">
                      <source src="@/assets/home/视频2.mp4" type="video/mp4">
                      您的浏览器不支持视频播放
                    </video>
                  </div>
                </div>
                
                <!-- 右侧简介 -->
                <div style="flex: 1; min-width: 300px; display: flex; flex-direction: column; justify-content: center;">
                  <h4 style="font-size: 24px; color: #3E4F67; margin-bottom: 20px;">商家管理系统</h4>
                  
                  <div style="margin-bottom: 25px;">
                    <p style="margin-bottom: 15px; color: #555; line-height: 1.6;">华衣甄选商家管理系统为汉服店铺提供全方位的数字化管理解决方案，助力商家高效运营和精准营销。</p>
                    <p style="color: #555; line-height: 1.6;">通过便捷的后台操作界面，商家可以轻松管理订单、库存和客户资料，提高工作效率。</p>
                  </div>
                  
                  <div style="margin-bottom: 25px;">
                    <div style="display: flex; margin-bottom: 15px;">
                      <div style="width: 24px; height: 24px; background-color: #8B4513; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 12px; flex-shrink: 0;">1</div>
                      <div>
                        <h5 style="font-size: 17px; color: #333; margin-bottom: 5px;">店铺管理</h5>
                        <p style="color: #666; line-height: 1.5;">多门店管理、人员排班、门店业绩分析，满足多种经营场景需求。</p>
                      </div>
                    </div>
                    
                    <div style="display: flex; margin-bottom: 15px;">
                      <div style="width: 24px; height: 24px; background-color: #8B4513; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 12px; flex-shrink: 0;">2</div>
                      <div>
                        <h5 style="font-size: 17px; color: #333; margin-bottom: 5px;">商品管理</h5>
                        <p style="color: #666; line-height: 1.5;">轻松管理汉服商品、库存和价格，支持多规格多款式管理。</p>
                      </div>
                    </div>
                    
                    <div style="display: flex;">
                      <div style="width: 24px; height: 24px; background-color: #8B4513; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 12px; flex-shrink: 0;">3</div>
                      <div>
                        <h5 style="font-size: 17px; color: #333; margin-bottom: 5px;">营销工具</h5>
                        <p style="color: #666; line-height: 1.5;">内置多种营销工具和活动模板，支持优惠券、满减、会员积分等多种营销方式。</p>
                      </div>
                    </div>
                  </div>
                  
                  <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;">
                    <div style="padding: 8px 16px; background-color: rgba(93, 137, 186, 0.1); border-radius: 20px; color: #5D89BA;">订单处理</div>
                    <div style="padding: 8px 16px; background-color: rgba(93, 137, 186, 0.1); border-radius: 20px; color: #5D89BA;">库存管理</div>
                    <div style="padding: 8px 16px; background-color: rgba(93, 137, 186, 0.1); border-radius: 20px; color: #5D89BA;">客户管理</div>
                    <div style="padding: 8px 16px; background-color: rgba(93, 137, 186, 0.1); border-radius: 20px; color: #5D89BA;">预约服务</div>
                    <div style="padding: 8px 16px; background-color: rgba(93, 137, 186, 0.1); border-radius: 20px; color: #5D89BA;">员工管理</div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 数据可视化平台 -->
            <div class="admin-section" style="background: white; border-radius: 15px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); padding: 30px; margin-top: 10px;">
              <div style="display: flex; flex-wrap: wrap; gap: 30px; align-items: center;">
                <!-- 左侧视频展示 - 垂直居中 -->
                <div style="flex: 0 0 350px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                  <div class="mac-frame" style="width: 100%; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);">
                    <div class="mac-top-bar">
                      <div class="mac-buttons">
                        <span class="mac-button red"></span>
                        <span class="mac-button yellow"></span>
                        <span class="mac-button green"></span>
                      </div>
                    </div>
                    <div class="demo-video-container" style="width: 100%;">
                      <video class="demo-video" autoplay muted loop playsinline disablePictureInPicture style="width: 100%; height: auto;">
                        <source src="@/assets/home/view.mp4" type="video/mp4">
                        您的浏览器不支持视频播放
                      </video>
                    </div>
                  </div>
                </div>
                
                <!-- 右侧简介 -->
                <div style="flex: 1; min-width: 300px; display: flex; flex-direction: column; justify-content: center;">
                  <h4 style="font-size: 24px; color: #3E4F67; margin-bottom: 20px;">数据可视化平台</h4>
                  
                  <div style="margin-bottom: 25px;">
                    <p style="margin-bottom: 15px; color: #555; line-height: 1.6;">华衣甄选数据可视化平台利用先进的AI算法，对店铺运营数据进行深度分析，直观展示关键业务指标。</p>
                    <p style="color: #555; line-height: 1.6;">通过智能数据分析，帮助商家了解客户行为模式，发现潜在商机，制定更精准的经营策略。</p>
                  </div>
                  
                  <div style="margin-bottom: 25px;">
                    <div style="display: flex; margin-bottom: 15px;">
                      <div style="width: 24px; height: 24px; background-color: #8B4513; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 12px; flex-shrink: 0;">1</div>
                      <div>
                        <h5 style="font-size: 17px; color: #333; margin-bottom: 5px;">销售数据分析</h5>
                        <p style="color: #666; line-height: 1.5;">直观展示销售趋势、畅销品类、促销效果等核心业务数据，帮助商家把握市场动向。</p>
                      </div>
                    </div>
                    
                    <div style="display: flex; margin-bottom: 15px;">
                      <div style="width: 24px; height: 24px; background-color: #8B4513; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 12px; flex-shrink: 0;">2</div>
                      <div>
                        <h5 style="font-size: 17px; color: #333; margin-bottom: 5px;">客户画像分析</h5>
                        <p style="color: #666; line-height: 1.5;">深入分析客户属性、消费习惯和兴趣偏好，帮助商家精准定位目标客户群体。</p>
                      </div>
                    </div>
                    
                    <div style="display: flex;">
                      <div style="width: 24px; height: 24px; background-color: #8B4513; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 12px; flex-shrink: 0;">3</div>
                      <div>
                        <h5 style="font-size: 17px; color: #333; margin-bottom: 5px;">预测分析</h5>
                        <p style="color: #666; line-height: 1.5;">基于历史数据进行销售预测、库存优化和趋势预判，助力商家提前布局，把握市场先机。</p>
                      </div>
                    </div>
                  </div>
                  
                  <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;">
                    <div style="padding: 8px 16px; background-color: rgba(93, 137, 186, 0.1); border-radius: 20px; color: #5D89BA;">实时监控</div>
                    <div style="padding: 8px 16px; background-color: rgba(93, 137, 186, 0.1); border-radius: 20px; color: #5D89BA;">交互式图表</div>
                    <div style="padding: 8px 16px; background-color: rgba(93, 137, 186, 0.1); border-radius: 20px; color: #5D89BA;">数据导出</div>
                    <div style="padding: 8px 16px; background-color: rgba(93, 137, 186, 0.1); border-radius: 20px; color: #5D89BA;">趋势预测</div>
                    <div style="padding: 8px 16px; background-color: rgba(93, 137, 186, 0.1); border-radius: 20px; color: #5D89BA;">异常预警</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 装饰图片 -->
        <div class="decoration-image top-right">
          <img src="@/assets/home/a8f0a5c73969d8f0e76c2d96c0f29f1.png" alt="华衣甄选" />
        </div>
        <div class="decoration-image bottom-left">
          <img src="@/assets/home/929d625ec1e5f8945301f9923e81c9d.png" alt="华衣甄选" />
        </div>
        
        <div class="scroll-indicator">
          <span>向下滚动</span>
          <i class="scroll-arrow"></i>
        </div>
      </div>
    </section>

    <!-- 服务特色 -->
    <section class="features" id="services">
      <div class="container">
        <h2 class="section-title">全方位服务</h2>
        <p class="section-subtitle">专业汉服管理系统，助力商家数字化转型</p>
        
        <div class="sticky-header" ref="stickyHeader" :class="{ 'is-sticky': isSticky }">
          <div class="sticky-container">
            <h3 class="sticky-title">{{ currentServiceSection }}</h3>
          </div>
        </div>
        
        <!-- 用户端服务 -->
        <div class="section-block" id="user-services" ref="userServices">
          <h3 class="section-block-title">用户服务</h3>
          <div class="features-grid">
            <div class="feature-card" v-for="(feature, index) in features" :key="index">
              <div class="feature-icon">
                <span class="iconfont" :class="feature.icon">
                  <img :src="feature.icon" alt="">
                </span>
              </div>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
          
          <div class="features-grid mt-40">
            <div class="feature-card" v-for="(feature, index) in additionalFeatures" :key="index">
              <div class="feature-icon">
                <span class="iconfont" :class="feature.icon">
                  <img :src="feature.icon" alt="">
                </span>
              </div>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </div>
        
        <!-- 后台管理系统 -->
        <div class="section-block mt-60" id="admin-services" ref="adminServices">
          <h3 class="section-block-title">管理系统</h3>
          <div class="features-grid admin-grid">
            <div class="feature-card" v-for="(feature, index) in adminFeatures" :key="index">
              <div class="feature-icon">
                <span class="iconfont" :class="feature.icon">
                  <img :src="feature.icon" alt="">
                </span>
              </div>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
          
          <!-- 数据可视化分析模块 -->
          <div class="data-visualization mt-60" ref="dataVisualization">
            <h3 class="section-block-title">数据可视化分析</h3>
            <p class="visualization-subtitle">智能分析商家运营数据，助力精准决策</p>
            
            <div class="features-grid admin-grid">
              <div class="feature-card" v-for="(feature, index) in visualFeatures" :key="index">
                <div class="feature-icon">
                  <span class="iconfont" :class="feature.icon">
                    <img :src="feature.icon" alt="">
                  </span>
                </div>
                <h3>{{ feature.title }}</h3>
                <p>{{ feature.description }}</p>
              </div>
            </div>
            
           
          </div>
        </div>
      </div>
    </section>

    <!-- 小程序定制模块 -->
    <div class="section-block mt-60" id="miniprogram-custom" ref="miniprogramCustom">
      <div class="container">
        <h3 class="section-block-title">小程序定制</h3>
        <p class="visualization-subtitle">专业团队打造专属小程序，满足您的个性化需求</p>
        
        <div class="custom-intro-container">
          <div class="custom-intro-content">
            <div class="custom-intro-text">
              <h4>一站式小程序定制服务</h4>
              <p>华衣甄选提供专业的小程序定制开发服务，为汉服商家打造独具特色的线上展示平台。我们的开发团队拥有丰富的小程序开发经验，可以根据您的需求定制功能完善、设计精美的小程序，助力您的业务数字化转型。</p>
              
              <div class="service-features">
                <div class="service-feature-item">
                  <div class="feature-number">1</div>
                  <div class="feature-content">
                    <h5>个性化UI设计</h5>
                    <p>根据品牌调性定制专属界面风格，呈现独特品牌形象</p>
                  </div>
                </div>
                
                <div class="service-feature-item">
                  <div class="feature-number">2</div>
                  <div class="feature-content">
                    <h5>功能模块定制</h5>
                    <p>根据业务需求定制专属功能，满足不同经营场景</p>
                  </div>
                </div>
                
                <div class="service-feature-item">
                  <div class="feature-number">3</div>
                  <div class="feature-content">
                    <h5>一对一技术支持</h5>
                    <p>专业技术团队提供持续的技术支持和运营指导</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="custom-intro-image">
              <div class="image-wrapper">
                <img src="https://pic1.imgdb.cn/item/684892ac58cb8da5c841ec13.png" alt="小程序定制" class="custom-image">
              </div>
            </div>
          </div>
        </div>
        
        <!-- 作品案例展示 -->
        <div class="case-showcase">
          <h4 class="case-title">精选案例展示</h4>
          
          <!-- 案例展示区域布局 -->
          <div class="case-content-wrapper">
            <!-- 侧边分类标签 -->
            <div class="case-categories side-categories animated-categories" :class="{ 'sticky-categories': isCategorySticky }">
              <button 
                class="category-btn" 
                :class="{ active: currentCategory === 'all' }" 
                @click="setCategory('all')"
              >
                <span class="category-icon all-icon"></span>
                <span class="category-text">全部案例</span>
              </button>
              <button 
                class="category-btn" 
                :class="{ active: currentCategory === 'experience' }" 
                @click="setCategory('experience')"
              >
                <span class="category-icon experience-icon"></span>
                <span class="category-text">体验馆类</span>
              </button>
              <button 
                class="category-btn" 
                :class="{ active: currentCategory === 'shop' }" 
                @click="setCategory('shop')"
              >
                <span class="category-icon shop-icon"></span>
                <span class="category-text">商城类</span>
              </button>
              <button 
                class="category-btn" 
                :class="{ active: currentCategory === 'culture' }" 
                @click="setCategory('culture')"
              >
                <span class="category-icon culture-icon"></span>
                <span class="category-text">文化推广类</span>
              </button>
              <button 
                class="category-btn" 
                :class="{ active: currentCategory === 'photo' }" 
                @click="setCategory('photo')"
              >
                <span class="category-icon photo-icon"></span>
                <span class="category-text">摄影服务类</span>
              </button>
            </div>
            
            <!-- 右侧案例展示 -->
            <div class="case-grid-wrapper">
              <transition-group 
                name="case-fade" 
                tag="div" 
                class="case-grid"
              >
                <div 
                  class="case-item" 
                  v-for="(item, index) in displayedCaseItems" 
                  :key="item.title"
                  :data-aos="index % 2 === 0 ? 'fade-up' : 'fade-up'"
                  :data-aos-delay="index * 100"
                  :data-aos-duration="800"
                >
                  <div class="case-image">
                    <img :src="item.image" :alt="item.title" loading="lazy" />
                    <div class="case-overlay">
                      <h5>{{ item.title }}</h5>
                      <p>{{ item.description }}</p>
                      <button class="edit-btn overlay-btn" @click.stop="goToEditor(item)">
                        <i class="edit-icon"></i>
                        <span>立即定制</span>
                      </button>
                    </div>
                  </div>
                            <div class="case-info">
            <h5>{{ item.title }}</h5>
            <p>{{ item.description }}</p>
          </div>
                </div>
              </transition-group>
              
              <!-- 查看更多按钮 -->
              <div class="view-more-container" v-if="showViewMoreBtn">
                <button class="view-more-btn" @click="toggleViewMore">
                  {{ isViewingAll ? '收起' : '查看更多' }}
                  <i class="view-more-icon" :class="{ 'is-expanded': isViewingAll }"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 汉服展示 -->
    <section class="showcase" id="costumes">
      <div class="container">
        <h2 class="section-title">臻品鉴赏</h2>
        <p class="section-subtitle">甄选东方美学，演绎华服之美</p>
        <div class="showcase-grid">
          <div class="showcase-item" v-for="(item, index) in showcaseItems" :key="index">
            <div class="showcase-image">
              <img :src="item.image" :alt="item.title" />
              <div class="showcase-overlay">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
                <a href="#home" class="showcase-btn">立即预约</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 品牌故事 -->
    <section class="story" id="about">
      <div class="container">
        <h2 class="section-title">品牌故事</h2>
        <div class="story-content">
          <div class="story-text">
            <p>华衣甄选致力于帮助汉服商家实现公域流量向私域流量的高效转化，打造汉服行业数字化升级的领航者。我们运用AI智能算法、大数据分析和精准营销活动，为商家提供全方位的降本增效解决方案，让传统汉服文化在现代商业环境中焕发新生。</p>
            <div class="story-features">
              <div class="feature-item">
                <div class="feature-icon">
                  
                  <img src="https://pic1.imgdb.cn/item/683e9c3358cb8da5c82818a0.png" alt="">
                </div>
                <div class="feature-content">
                  <h4>AI智能推荐</h4>
                  <p>基于用户画像的智能匹配系统，提升成交转化率</p>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon">
                 <img src="https://pic1.imgdb.cn/item/683e9ca658cb8da5c8281e5d.png" alt="">
                </div>
                <div class="feature-content">
                  <h4>数据驱动运营</h4>
                  <p>精准分析消费者行为，优化商家经营策略</p>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon">
                  <img src="https://pic1.imgdb.cn/item/683e9ccf58cb8da5c8282040.png" alt="">
                </div>
                <div class="feature-content">
                  <h4>整合营销活动</h4>
                  <p>多渠道推广引流，助力商家私域流量沉淀</p>
                </div>
              </div>
            </div>
            <div class="story-stats">
              <div class="stat-item">
                <span class="stat-number">15000+</span>
                <span class="stat-label">注册用户</span>
                <div class="stat-growth">较上月<span style="color: #FF8A4C; font-weight: bold;">+12.5%</span></div>
              </div>
              <div class="stat-item">
                <span class="stat-number">25+</span>
                <span class="stat-label">合作门店</span>
                <div class="stat-growth">较上月<span style="color: #FF8A4C; font-weight: bold;">+3</span></div>
              </div>
              <div class="stat-item">
                <span class="stat-number">10000+</span>
                <span class="stat-label">汉服体验场次</span>
                <div class="stat-growth">较上月<span style="color: #FF8A4C; font-weight: bold;">+8.7%</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系预约 -->
    <section class="contact" id="contact">
      <div class="container">
        <h2 class="section-title">{{ merchantData.title }}</h2>
        <p class="section-subtitle">{{ merchantData.subtitle }}</p>
        <div class="contact-content">
          <div class="contact-info">
            <div class="info-list">
              <div class="info-item" v-for="(item, index) in merchantData.infoItems" :key="index">
                <div class="info-icon">
                 <img class="img" :src="item.icon" alt="">
                </div>
                <div class="info-text">
                  <h4>{{ item.title }}</h4>
                  <p>{{ item.description }}</p>
                  <button v-if="item.title === '相关费用'" class="btn-details" @click="showFeeDetails = !showFeeDetails">
                    {{ showFeeDetails ? '收起详情' : '点击查看详情' }}
                    <i class="iconfont" :class="showFeeDetails ? 'icon-up' : 'icon-down'"></i>
                  </button>
                </div>
              </div>
              
              <!-- 版本费用说明 -->
              <div class="version-plans" v-show="showFeeDetails">
                <div class="version-item" v-for="(plan, index) in merchantData.versionPlans" :key="index" :class="{ active: plan.isRecommended }">
                  <div class="version-tag" v-if="plan.isRecommended">推荐</div>
                  <div class="version-header">
                    <h5>{{ plan.name }}</h5>
                    <span class="version-price">{{ plan.price }}</span>
                    <span class="price-desc">{{ plan.period }}</span>
                  </div>
                  <div class="version-features">
                    <div class="feature" v-for="(feature, fIndex) in plan.features" :key="fIndex" :class="{ 'feature-disabled': !feature.available }">
                      <i v-if="feature.available" class="iconfont icon-check"></i>
                      <i v-else class="iconfont icon-close"></i>
                      <span>{{ feature.text }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="contact-form merchant-apply">
            <h3 class="apply-title">{{ merchantData.contactForm.title }}</h3>
            <form @submit.prevent="handleSubmit">
              <div class="form-group">
                <input type="text" v-model="form.name" placeholder="店铺名称" required />
              </div>
              <div class="form-group">
                <input type="tel" v-model="form.phone" placeholder="联系电话" required />
              </div>
              <div class="form-group">
                <textarea v-model="form.message" placeholder="店铺简介及产品特色" rows="4" required></textarea>
              </div>
              <button type="submit" class="btn-submit">提交申请</button>
            </form>
            
            <!-- <div class="contact-methods">
              <h4>联系方式</h4>
              <div class="method-item" v-for="(item, index) in merchantData.contactForm.contactMethods" :key="index">
                <i class="iconfont" :class="item.icon"></i>
                <span>{{ item.text }}</span>
              </div>
            </div>
             -->
            <div class="form-decoration">
              <div class="decoration-circle circle-1"></div>
              <div class="decoration-circle circle-2"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-main">
          <div class="footer-info">
            <h3>华衣甄选</h3>
            <p>传承文化 · 演绎经典</p>
            <div class="footer-social">
              <a href="#" class="social-icon"><i class="iconfont icon-weixin"></i></a>
              <a href="#" class="social-icon"><i class="iconfont icon-weibo"></i></a>
              <a href="#" class="social-icon"><i class="iconfont icon-douyin"></i></a>
            </div>
          </div>
          <div class="footer-nav">
            <div class="footer-nav-group">
              <h4>关于我们</h4>
              <ul>
                <li><a href="#about">品牌故事</a></li>
                <li><a href="#services">服务介绍</a></li>
                <li><a href="#contact">商家入驻</a></li>
              </ul>
            </div>
            <div class="footer-nav-group">
              <h4>服务项目</h4>
              <ul>
                <li><a href="#services">汉服体验</a></li>
                <li><a href="#services">专业摄影</a></li>
                <li><a href="#services">私人定制</a></li>
              </ul>
            </div>
            <div class="footer-nav-group">
              <h4>快速链接</h4>
              <ul>
                <li><a href="#home">返回顶部</a></li>
                <li><a href="#costumes">汉服展示</a></li>
                <li><a href="#contact">预约咨询</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <p>© 2025 华衣甄选 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
// 导航数据
const navItems = [
  { id: 'home', name: '首页' },
  { id: 'services', name: '服务项目' },
  { id: 'miniprogram-custom', name: '小程序定制' },
  { id: 'costumes', name: '汉服展示' },
  { id: 'about', name: '关于我们' },
  { id: 'contact', name: '商家入驻' }
];

// 标签页状态
const activeTab = ref('user');

// 费用详情显示状态
const showFeeDetails = ref(false);

// 路由
const router = useRouter();

// 状态管理
const isScrolled = ref(false);
const isHeaderHidden = ref(false);
const currentSection = ref('home');
const form = ref({
  name: '',
  phone: '',
  message: ''
});

// 侧边栏吸顶相关变量
const isCategorySticky = ref(false);
const categoryOffset = ref(0);
const caseCategories = ref(null);

let lastScrollTop = 0; // 记录上次滚动位置

// 商家入驻数据
const merchantData = {
  title: "商家入驻",
  subtitle: "加入华衣甄选，共创汉服文化新篇章",
  infoItems: [
    {
      icon: "https://pic1.imgdb.cn/item/683e830058cb8da5c8277c11.png",
      title: "入驻门槛",
      description: "保证商品必须为原创设计，且销售价格不相比商家在其它平台所销售的资产品价格高"
    },
  
    {
      icon: "https://pic1.imgdb.cn/item/683e842358cb8da5c8278c2a.png",
      title: "免费推广",
      description: "入驻期间，华衣甄选将为所有商家免费推广品牌与产品"
    },
    {
      icon: "https://pic1.imgdb.cn/item/683e844f58cb8da5c8278e7f.png",
      title: "相关费用",
      description: "根据您的需求提供三种合作方案，满足不同规模商家的需求"
    },
  ],
  versionPlans: [
    {
      name: "普通版",
      price: "¥1299",
      period: "每年",
      isRecommended: false,
      features: [
        { text: "基础店铺展示", available: true },
        { text: "服饰浏览功能", available: true },
        { text: "商品管理系统", available: true },
        { text: "不含服务器费用", available: false }
      ]
    },
    {
      name: "Pro版",
      price: "¥2599",
      period: "每年",
      isRecommended: true,
      features: [
        { text: "普通版全部功能", available: true },
        { text: "最多2个门店", available: true },
        { text: "预约服务系统", available: true },
        { text: "预约高峰提醒", available: true },
        { text: "化妆师/摄影师预约", available: true },
        { text: "免费营销策略", available: true },
        { text: "包含基础服务器费用", available: false },
      ]
    },
    {
      name: "ProMax版",
      price: "¥3999",
      period: "每年",
      isRecommended: false,
      features: [
        { text: "Pro版全部功能", available: true },
        { text: "社交分享功能", available: true },
        { text: "多门店展示", available: true },
        { text: "AI生成营销物料", available: true },
        { text: "汉服周边体验", available: true },
        { text: "专属客户经理", available: true }
      ]
    }
  ],
  contactForm: {
    title: "我要申请入驻",
    contactMethods: [
      {
        icon: "icon-phone",
        text: "181-6704-4337"
      }
    ]
  }
};

// 特色服务数据
const features = [
  {
    icon: 'https://pic1.imgdb.cn/item/683e95c458cb8da5c827ec3e.png',
    title: '门店预约',
    description: '便捷在线预约，无需排队等候'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e967e58cb8da5c827f2c5.png',
    title: '服饰管理',
    description: '多款精选汉服，专业搭配指导'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e96ba58cb8da5c827f41d.png',
    title: 'AR体验',
    description: '虚拟试穿，沉浸式汉服体验'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e96df58cb8da5c827f50e.png',
    title: '热门活动',
    description: '汉服文化活动，线上报名参与'
  }
];

// 添加更多服务项目
const additionalFeatures = [
  {
    icon: 'https://pic1.imgdb.cn/item/683e970d58cb8da5c827f601.png',
    title: '汉服周边',
    description: '精选文创产品，传统文化融入生活'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e974f58cb8da5c827f6ca.png',
    title: '汉服圈子',
    description: '爱好者社区，分享交流汉服文化'
  }, 
  {
    icon: 'https://pic1.imgdb.cn/item/683e978258cb8da5c827f7bf.png',
    title: 'AI智能推荐',
    description: '个性化搭配建议，智能选款'
  }
];

// 后台管理系统特色
const adminFeatures = [
  {
    icon: 'https://pic1.imgdb.cn/item/683e97cc58cb8da5c827f970.png',
    title: '工作台管理',
    description: '高效运营数据分析与管理'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e97ec58cb8da5c827fa0a.png',
    title: '轮播图管理',
    description: '灵活配置官网与小程序展示内容'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e980b58cb8da5c827fa94.png',
    title: '优惠券管理',
    description: '多样化营销活动策略配置'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e983358cb8da5c827fb44.png',
    title: '汉服知识图谱',
    description: '系统化汉服文化知识管理'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e986b58cb8da5c827fc57.png',
    title: '订单管理',
    description: '高效处理预约与销售订单'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e988858cb8da5c827fce2.png',
    title: '预约分配',
    description: '智能繁忙时段预约调度系统'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e98a258cb8da5c827fd5a.png',
    title: 'AI物料生成',
    description: '智能生成营销素材与设计方案'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e98bd58cb8da5c827fde2.png',
    title: '员工管理',
    description: '员工排班与绩效管理系统'
  }
];

// 数据可视化分析特色
const visualFeatures = [
  {
    icon: 'https://pic1.imgdb.cn/item/683e99b458cb8da5c82801fb.png',
    title: '多维度数据分析',
    description: '通过智能算法分析用户行为、预约趋势和销售数据，帮助商家精准把握市场动态'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e99d158cb8da5c8280287.png',
    title: '直观业务仪表盘',
    description: '定制化数据展示界面，关键业务指标一目了然，助力商家快速决策'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e9a0358cb8da5c82802fe.png',
    title: '趋势预测分析',
    description: '基于历史数据进行智能预测，提前洞察市场变化，把握商机'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e9a2658cb8da5c82803bc.png',
    title: '用户画像洞察',
    description: '深入分析用户特征和行为偏好，帮助商家精准定位目标客户'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e9a4a58cb8da5c82804cd.png',
    title: '一键生成报表',
    description: '自动生成专业数据报表，支持多种格式导出，满足不同场景需求'
  },
  {
    icon: 'https://pic1.imgdb.cn/item/683e9a6958cb8da5c82805ab.png',
    title: '异常数据预警',
    description: '实时监控关键指标，自动识别异常数据并及时预警，防患于未然'
  }
];

// 数据可视化展示
const visualizationDemos = [
  {
    title: '销售数据分析',
    image: 'https://pic1.imgdb.cn/item/683e830058cb8da5c8277c11.png'
  },
  {
    title: '用户行为分析',
    image: 'https://pic1.imgdb.cn/item/683eaa8958cb8da5c8288c4d.png'
  }
];

// 展示数据
const showcaseItems = [
  {
    image: 'https://pic1.imgdb.cn/item/683e9d8e58cb8da5c82829c7.png',
    title: '明制汉服',
    description: '典雅大方，尽显东方韵味'
  },
  {
    image: 'https://pic1.imgdb.cn/item/683e9dc958cb8da5c8282c4e.png',
    title: '唐制汉服',
    description: '华贵飘逸，再现盛世风华'
  },
  {
    image: 'https://pic1.imgdb.cn/item/683e9e1058cb8da5c8282df6.png',
    title: '宋制汉服',
    description: '清雅素净，彰显文人气质'
  }
];

// 服务部分吸顶相关
const stickyHeader = ref(null);
const userServices = ref(null);
const adminServices = ref(null);
const dataVisualization = ref(null);
const miniprogramCustom = ref(null);
const currentServiceSection = ref('用户服务');
const isSticky = ref(false);

// 检测当前服务部分
const checkServiceSection = () => {
  if (!userServices.value || !adminServices.value) return;
  
  const userRect = userServices.value.getBoundingClientRect();
  const adminRect = adminServices.value.getBoundingClientRect();
  const dataVisRect = dataVisualization.value ? dataVisualization.value.getBoundingClientRect() : null;
  const miniprogramRect = miniprogramCustom.value ? miniprogramCustom.value.getBoundingClientRect() : null;
  const windowHeight = window.innerHeight;
  
  // 判断哪个部分在视窗中更加突出
  if (miniprogramRect && miniprogramRect.top < windowHeight / 2) {
    currentServiceSection.value = '小程序定制';
  } else if (dataVisRect && dataVisRect.top < windowHeight / 2) {
    currentServiceSection.value = '数据可视化分析';
  } else if (adminRect.top < windowHeight / 2) {
    currentServiceSection.value = '管理系统';
  } else {
    currentServiceSection.value = '用户服务';
  }
  
  // 检查是否应该启用吸顶
  const featuresSection = document.getElementById('services');
  if (featuresSection) {
    const featuresRect = featuresSection.getBoundingClientRect();
    isSticky.value = featuresRect.top < 0 && featuresRect.bottom > 100;
  }
};

// 更新滚动处理函数
const handleScroll = () => {
  const currentScrollTop = window.scrollY;
  
  // 判断是否滚动超过阈值
  isScrolled.value = currentScrollTop > 50;
  
  // 判断滚动方向，向下滚动时隐藏，向上滚动时显示
  if (currentScrollTop > lastScrollTop && currentScrollTop > 150) {
    // 向下滚动且超过150px
    isHeaderHidden.value = true;
  } else {
    // 向上滚动或在页面顶部
    isHeaderHidden.value = false;
  }
  
  lastScrollTop = currentScrollTop;
  
  // 获取当前滚动位置最接近的部分
  const sections = navItems.map(item => ({
    id: item.id,
    offset: Math.abs(document.getElementById(item.id)?.getBoundingClientRect().top || 0)
  }));
  
  const closest = sections.reduce((prev, curr) => 
    prev.offset < curr.offset ? prev : curr
  );
  
  currentSection.value = closest.id;
  
  // 检查服务部分
  checkServiceSection();
};

// 表单提交
const handleSubmit = async () => {
  console.log('Form submitted:', form.value);
  form.value = {
    name: '',
    phone: '',
    message: ''
  };
};

// 生命周期钩子
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  handleScroll();

  // 添加平滑滚动处理
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', (e) => {
      e.preventDefault();
      const targetId = anchor.getAttribute('href')?.slice(1);
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        targetElement.scrollIntoView({ 
          behavior: 'smooth',
          block: 'start'
        });
      }
    });
  });

  // 获取分类栏元素
  caseCategories.value = document.querySelector('.case-categories');
  if (caseCategories.value) {
    // 获取初始位置
    categoryOffset.value = caseCategories.value.getBoundingClientRect().top + window.scrollY;
    
    // 添加滚动监听
    window.addEventListener('scroll', handleCategorySticky);
  }
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleCategorySticky);
});

// 处理侧边栏吸顶
const handleCategorySticky = () => {
  if (!caseCategories.value) return;
  
  const scrollPosition = window.scrollY;
  // 当滚动位置超过侧边栏初始位置时，添加吸顶样式
  isCategorySticky.value = scrollPosition > categoryOffset.value - 20; // 20px的偏移量，提前触发吸顶
};

// 小程序定制案例
const caseItems = [
  {
    image: 'https://pic1.imgdb.cn/item/68486d8e58cb8da5c841d7a2.jpg',
    title: '汉服体验馆小程序',
    description: '集汉服展示、预约体验、社区互动于一体的综合服务平台',
    category: 'experience'
  },
   {
    image: 'https://pic1.imgdb.cn/item/6848779358cb8da5c841dd88.jpg',
    title: '汉服摄影师化妆师云存储展示平台',
    description: '专业汉服摄影化妆师云存储展示平台',
    category: 'photo'
  },
  {
    image: 'https://pic1.imgdb.cn/item/68486df258cb8da5c841d7fe.jpg',
    title: '汉服定制商城',
    description: '专注汉服私人定制，支持在线设计与下单的精品商城',
    category: 'shop'
  },
  {
    image: 'https://pic1.imgdb.cn/item/68486ec258cb8da5c841d823.jpg',
    title: '汉服文化推广平台',
    description: '融合汉服文化教育、线下活动报名的互动平台',
    category: 'culture'
  },
  {
    image: 'https://pic1.imgdb.cn/item/68486ee658cb8da5c841d835.jpg',
    title: '汉服摄影预约系统',
    description: '专业汉服摄影服务预约与作品展示平台',
    category: 'photo'
  },
  // 添加更多案例，使其超过6个
  {
    image: 'https://pic1.imgdb.cn/item/68486d8e58cb8da5c841d7a1.jpg',
    title: '汉服文创电商平台',
    description: '结合传统文化元素的创新电商平台，提供多样化汉服周边产品',
    category: 'shop'
  },
  {
    image: 'https://pic1.imgdb.cn/item/68486f2358cb8da5c841d852.jpg',
    title: '汉服社区论坛',
    description: '汉服爱好者交流平台，分享穿搭经验和文化知识',
    category: 'culture'
  },
  {
    image: 'https://pic1.imgdb.cn/item/684386109f345e7d72871827.jpg',
    title: '汉服租赁服务',
    description: '便捷的汉服在线租赁平台，提供多种风格汉服短期租用',
    category: 'experience'
  },
];

// 过滤案例
const filteredCaseItems = computed(() => {
  if (currentCategory.value === 'all') {
    return caseItems;
  } else {
    return caseItems.filter(item => item.category === currentCategory.value);
  }
});

// 显示更多相关状态
const isViewingAll = ref(false);
const ITEMS_PER_PAGE = 6;

// 是否显示"查看更多"按钮
const showViewMoreBtn = computed(() => {
  return filteredCaseItems.value.length > ITEMS_PER_PAGE;
});

// 当前显示的案例
const displayedCaseItems = computed(() => {
  if (isViewingAll.value) {
    return filteredCaseItems.value;
  } else {
    return filteredCaseItems.value.slice(0, ITEMS_PER_PAGE);
  }
});

// 切换查看更多状态
const toggleViewMore = () => {
  isViewingAll.value = !isViewingAll.value;
};

// 分类状态
const currentCategory = ref('all');

// 设置分类并重置查看状态
const setCategory = (category) => {
  currentCategory.value = category;
  isViewingAll.value = false;
};

// 跳转到编辑器页面
const goToEditor = (item) => {
  router.push({
    path: '/editor',
    query: { 
      template: item.category,
      title: item.title
    }
  });
};
</script>

<style lang="scss" scoped>
@use './version-plans.scss';

.official-website {
  font-family: 'Noto Serif SC', serif;
  color: #333;
  background-color: #fff;

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
  }

  // 导航栏
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.95);
    transition: all 0.3s ease;

    &.header-scrolled {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    &.header-hidden {
      transform: translateY(-100%);
    }

    .container {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      align-items: center;
      
      img {
        max-height: 40px;
        width: auto;
        margin-right: 10px;
        transition: all 0.3s ease;
      }
      
      h1 {
        font-size: 20px;
        font-weight: bold;
        margin: 0;
        color: #333;
      }
    }

    .nav {
      ul {
        display: flex;
        gap: 30px;
        list-style: none;
        margin: 0;
        padding: 0;

        a {
          color: #333;
          text-decoration: none;
          font-size: 16px;
          padding: 10px 0;
          position: relative;
          font-weight: 500;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #8B4513;
            transition: width 0.3s;
          }

          &:hover, &.active {
            color: #8B4513;

            &::after {
              width: 100%;
            }
          }
        }
      }
    }
  }

  // 主区域
  .hero {
    min-height: 100vh;
    // background: linear-gradient(45deg, #d2b089, #e6c9a8, #8B4513, #d2b089);
    background: linear-gradient(45deg, #efe4d7, #f0e370, #ffaa6d, #d2b089);

    background-size: 400% 400%;
    animation: gradientAnimation 10s ease infinite;
    position: relative;
    padding: 120px 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    
    .container {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    
    .hero-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 1000px;
    }
    
    // 装饰图片
    .decoration-image {
      position: absolute;
      z-index: 1;
      
      img {
        max-width: 100%;
        height: auto;
        transition: all 0.3s ease;
      }
      
      &.top-right {
        top: -30px;
        right: -200px;
        width: 180px;
        animation: float-top-right 6s ease-in-out infinite;
        
        @media (max-width: 1200px) {
          width: 160px;
          top: -20px;
          right: -150px;
        }
        
        @media (max-width: 992px) {
          width: 140px;
          top: -15px;
          right: -100px;
        }
        
        @media (max-width: 768px) {
          width: 100px;
          top: -10px;
          right: -70px;
        }
        
        @media (max-width: 576px) {
          width: 80px;
          top: -5px;
          right: -50px;
        }
      }
      
      &.bottom-left {
        bottom: -100px;
        left: -200px;
        width: 200px;
        animation: float-bottom-left 7s ease-in-out infinite;
        
        @media (max-width: 1200px) {
          width: 180px;
          bottom: -80px;
          left: -150px;
        }
        
        @media (max-width: 992px) {
          width: 160px;
          bottom: -60px;
          left: -100px;
        }
        
        @media (max-width: 768px) {
          width: 120px;
          bottom: -40px;
          left: -70px;
        }
        
        @media (max-width: 576px) {
          width: 100px;
          bottom: -30px;
          left: -50px;
        }
      }
    }
    
    .hero-text {
      text-align: center;
      margin-bottom: 60px;
      
      .main-title {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #333;
      }
      
      .sub-title {
        font-size: 24px;
        color: #666;
        margin-bottom: 30px;
      }
      
      .hero-btns {
        .btn-primary {
          display: inline-block;
          padding: 12px 30px;
          background-color: #8B4513;
          color: #fff;
          text-decoration: none;
          border-radius: 30px;
          font-size: 16px;
          transition: all 0.3s;
          
          &:hover {
            background-color: #A0522D;
            transform: translateY(-2px);
          }
        }
      }
    }
    
    // 多平台展示
    .platforms-display {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 40px;
      margin-top: 20px;
      
      .mobile-section {
        @media (max-width: 768px) {
          flex-direction: column;
          align-items: center;
          
          .platform-item {
            max-width: 100%;
            width: 100%;
            
            &.phone-display .platform-content {
              max-width: 280px;
              margin: 0 auto;
            }
          }
        }
      }
      
      .admin-section {
        transition: all 0.3s ease;
        
        &:hover {
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        }
        
        .admin-item {
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-10px);
          }
          
          @media (max-width: 992px) {
            max-width: 100%;
          }
        }
      }
      
      @media (max-width: 992px) {
        gap: 30px;
      }
      
      .platform-item {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        
        &:hover {
          transform: translateY(-10px);
        }
        
        &.qrcode-display:hover {
          .platform-content {
            box-shadow: 0 15px 35px rgba(7, 193, 96, 0.15);
            border: 1px solid rgba(7, 193, 96, 0.2);
          
          }
          
          .qrcode {
            transform: scale(1.05);
          }
          
          .scan-line {
            height: 4px;
            box-shadow: 0 0 15px rgba(7, 193, 96, 0.9);
          }
          
          .scan-tip span {
            color: #05a955;
            font-weight: 600;
          }
          
          .platform-title h4 {
            color: #05a955;
          }
        }
        
        .platform-content {
          background-color: #fff;
          border-radius: 15px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
          padding: 30px;
          text-align: center;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          transition: all 0.3s ease;
          border: 1px solid transparent;
          
          .section-heading {
            font-size: 24px;
            color: #8B4513;
            margin-bottom: 20px;
            position: relative;
            
            &:after {
              content: '';
              position: absolute;
              bottom: -8px;
              left: 50%;
              transform: translateX(-50%);
              width: 40px;
              height: 2px;
              background-color: #8B4513;
            }
          }
          
          .video-section {
            width: 100%;
            margin-bottom: 30px;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
          
          &.phone-border {
            background-color: #fff;
          
            padding: 0;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            max-width: 280px;
            margin: 0 auto;
            
            .platform-video {
              width: 100%;
              max-width: 80%;
              border-radius: 0;
              margin-bottom: 0;
              aspect-ratio: auto; /* 不限制比例 */
              border: 8px solid #000;
             border-radius: 20px;
             margin-top: 20px;  
            }
            
            .platform-text {
              padding: 25px 10px;
              background-color: #f8f8f8;
              border-top: 1px solid #eee;
            }
          }
          
          .platform-img {
            width: 80%;
            max-width: 240px;
            border-radius: 10px;
            margin-bottom: 20px;
            object-fit: cover;
          }
          
          .platform-video {
            width: 100%;
            max-width: 240px;
            border-radius: 10px;
            margin-bottom: 15px;
            object-fit: cover;
            outline: none;
          }
          
          .demo-video-container {
            width: 100%;
            max-width: 240px;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 15px;
            
            .demo-video {
              width: 100%;
              display: block;
              aspect-ratio: 16/9;
            }
          }
          
          .platform-text {
            width: 100%;
            margin-bottom: 20px;
            
            h4 {
              font-size: 20px;
              // margin-bottom: 5px;
              color: #333;
            }
            
            p {
              color: #666;
              font-size: 14px;
              margin-bottom: 0;
            }
          }
          
          // 恢复微信小程序相关样式
          .qrcode-wrapper {
            position: relative;
            width: 150px;
            height: 150px;
            margin-bottom: 5px;
          }
          
          .qrcode {
            width: 100%;
            height: 100%;
            display: block;
            transition: transform 0.5s ease;
          }
          
          .scan-animation {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            pointer-events: none;
            
            .scan-line {
              position: absolute;
              width: 100%;
              height: 3px;
              background: linear-gradient(to right, transparent, rgba(7, 193, 96, 0.8), transparent);
              box-shadow: 0 0 10px rgba(7, 193, 96, 0.7);
              top: 0;
              animation: scanning 2.5s ease-in-out infinite;
              transition: height 0.3s ease, box-shadow 0.3s ease;
            }
          }
          
          .scan-tip {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 15px;
            animation: pulse 1.5s ease-in-out infinite;
            
            .arrow-up {
              margin-bottom: 5px;
              animation: bounce 1.5s ease infinite;
            }
            
            span {
              color: #07C160;
              font-size: 14px;
              font-weight: 500;
            }
          }
          
          @keyframes pulse {
            0% {
              opacity: 0.7;
            }
            50% {
              opacity: 1;
            }
            100% {
              opacity: 0.7;
            }
          }
          
          @keyframes bounce {
            0%, 100% {
              transform: translateY(0);
            }
            50% {
              transform: translateY(-5px);
            }
          }
          
          @keyframes scanning {
            0% {
              top: 0;
            }
            50% {
              top: 100%;
            }
            100% {
              top: 0;
            }
          }
          
          &.qrcode-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            
            .platform-title {
              margin-top: 0;
              margin-bottom: 10px;
            }
            
            .qrcode-wrapper {
              flex-grow: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: 100%;
            }
            
            .qrcode-container {
              position: relative;
              width: 150px;
              height: 150px;
              margin-bottom: 5px;
            }
            
            .platform-description {
              margin-top: 10px;
              
              p {
                margin-bottom: 0;
              }
            }
          }
          
          // Mac风格边框
          .mac-frame {
            background-color: #f0f0f0;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            margin-bottom: 15px;
            border: 1px solid #d1d1d1;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            position: relative;
            
            &:hover {
              transform: scale(2.05);
              box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
              z-index: 10;
              
              .platform-video,
              .demo-video {
                transform: scale(1.02);
              }
            }
            
            .mac-top-bar {
              background: linear-gradient(to bottom, #e2e2e2, #d5d5d5);
              height: 25px;
              padding: 0 8px;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #c1c1c1;
              
              .mac-buttons {
                display: flex;
                gap: 6px;
                
                .mac-button {
                  width: 12px;
                  height: 12px;
                  border-radius: 50%;
                  
                  &.red {
                    background-color: #ff5f57;
                    border: 1px solid #e33e32;
                  }
                  
                  &.yellow {
                    background-color: #febc2e;
                    border: 1px solid #e1a116;
                  }
                  
                  &.green {
                    background-color: #28c840;
                    border: 1px solid #17aa2a;
                  }
                }
              }
            }
            
            .platform-video {
              width: 100%;
              display: block;
              border-radius: 0;
              margin-bottom: 0;
              transition: transform 0.3s ease;
            }
            
            .demo-video-container {
              margin-bottom: 0;
              
              .demo-video {
                margin-bottom: 0;
                border-radius: 0;
                transition: transform 0.3s ease;
              }
            }
          }
          
          // 添加后台管理系统的视频样式
          .platform-item.admin-display {
            .mac-frame {
              width: 100%;
              max-width: 320px;
              margin: 0 auto 15px;
            }
          }
        }
      }
    }
    
    // 滚动提示
    .scroll-indicator {
      position: absolute;
      bottom: -90px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      color: #999;
      
      span {
        display: block;
        margin-bottom: 10px;
        font-size: 14px;
      }
      
      .scroll-arrow {
        display: block;
        width: 20px;
        height: 20px;
        border-right: 2px solid #999;
        border-bottom: 2px solid #999;
        transform: rotate(45deg);
        margin: 0 auto;
        animation: bounce 2s infinite;
      }
    }
  }

  // 通用部分样式
  .section-title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
    color: #8B4513;
  }

  .section-subtitle {
    font-size: 18px;
    text-align: center;
    margin-bottom: 60px;
    color: #666;
  }

  // 特色服务
  .features {
    padding: 100px 0;
    background-color: #fff;
    position: relative;

    .sticky-header {
      position: sticky;
      top: 0;
      z-index: 90;
      width: 100%;
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateY(-100%);
      pointer-events: none;
      
      &.is-sticky {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      
      .sticky-container {
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 15px 0;
        
        .sticky-title {
          font-size: 20px;
          color: #8B4513;
          text-align: center;
          margin: 0;
        }
      }
    }

    .section-block {
      margin-bottom: 40px;
      
      &.mt-60 {
        margin-top: 60px;
      }
      
      .section-block-title {
        font-size: 28px;
        color: #8B4513;
        margin-bottom: 20px;
        text-align: center;
        position: relative;
        font-weight: 600;
        padding-bottom: 15px;
        
        &::after {
          content: '';
          display: block;
          width: 50px;
          height: 2px;
          background-color: #8B4513;
          margin: 15px auto;
          position: relative;
          z-index: 1;
        }
        
        &::before {
          content: '';
          position: absolute;
          bottom: 15px;
          left: 50%;
          transform: translateX(-50%);
          width: 100px;
          height: 1px;
          background-color: rgba(139, 69, 19, 0.1);
        }
      }
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
      
      &.admin-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }
      
      &.mt-40 {
        margin-top: 40px;
      }

      .feature-card {
        text-align: center;
        padding: 40px 25px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        transition: all 0.3s;
        border: 1px solid rgba(139, 69, 19, 0.1);

        &:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 35px rgba(139, 69, 19, 0.15);
          border-color: rgba(139, 69, 19, 0.2);
        }

        .feature-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 80px;

          border-radius: 50%;
          margin-bottom: 25px;
          
          .iconfont {
            width: 100%;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        h3 {
          font-size: 22px;
          margin-bottom: 15px;
          color: #333;
        }

        p {
          color: #666;
          line-height: 1.7;
        }
      }
    }

    // 全局副标题样式
    .visualization-subtitle {
      text-align: center;
      color: #666;
      margin-bottom: 40px;
      font-size: 16px;
      display: block;
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.8;
      position: relative;
    }

    .data-visualization {
      
      .visualization-demo {
        max-width: 800px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 30px;
        
        .mac-frame {
          background-color: #f0f0f0;
          border-radius: 8px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
          overflow: hidden;
          border: 1px solid #d1d1d1;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
          }
          
          .mac-top-bar {
            background: linear-gradient(to bottom, #e2e2e2, #d5d5d5);
            height: 25px;
            padding: 0 8px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #c1c1c1;
            
            .mac-buttons {
              display: flex;
              gap: 6px;
              
              .mac-button {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                
                &.red {
                  background-color: #ff5f57;
                  border: 1px solid #e33e32;
                }
                
                &.yellow {
                  background-color: #febc2e;
                  border: 1px solid #e1a116;
                }
                
                &.green {
                  background-color: #28c840;
                  border: 1px solid #17aa2a;
                }
              }
            }
          }
          
          .visualization-content {
            padding: 15px;
            background-color: #fff;
            
            .visualization-img {
              width: 100%;
              height: auto;
              border-radius: 4px;
              display: block;
            }
          }
          
          .demo-title {
            text-align: center;
            padding: 10px;
            font-size: 16px;
            font-weight: 500;
            color: #333;
            background-color: #f8f8f8;
            border-top: 1px solid #eee;
          }
        }
      }
    }
  }

  // 汉服展示
  .showcase {
    padding: 100px 0;
    background-color: #f9f9f9;

    .showcase-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 30px;

      .showcase-item {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
          
          .showcase-overlay {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .showcase-image {
          aspect-ratio: 3/4;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
          }
          
          &:hover img {
            transform: scale(1.05);
          }
        }

        .showcase-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 25px;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
          color: #fff;
          opacity: 0;
          transform: translateY(20px);
          transition: all 0.3s ease;

          h3 {
            font-size: 26px;
            margin-bottom: 10px;
          }

          p {
            font-size: 16px;
            opacity: 0.9;
            margin-bottom: 15px;
          }
          
          .showcase-btn {
            display: inline-block;
            padding: 8px 20px;
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 30px;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s;
            
            &:hover {
              background-color: #8B4513;
              border-color: #8B4513;
            }
          }
        }
      }
    }
  }

  // 品牌故事
  .story {
    padding: 100px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 30%;
      height: 100%;
      background-color: #f9f7f4;
      z-index: 0;
      border-top-left-radius: 100px;
      border-bottom-left-radius: 100px;
      opacity: 0.6;
    }

    .story-content {
      position: relative;
      z-index: 1;
      max-width: 900px;
      margin: 0 auto;
      
      .story-text {
        text-align: center;
        
        p {
          font-size: 18px;
          line-height: 1.8;
          margin-bottom: 50px;
          color: #666;
          max-width: 800px;
          margin-left: auto;
          margin-right: auto;
        }
        
        .story-features {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 30px;
          margin-bottom: 50px;
          
          @media (max-width: 768px) {
            grid-template-columns: 1fr;
            gap: 20px;
          }
          
          .feature-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 30px 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            border: 1px solid rgba(139, 69, 19, 0.1);
            
            &:hover {
              transform: translateY(-10px);
              box-shadow: 0 15px 35px rgba(139, 69, 19, 0.15);
              border-color: rgba(139, 69, 19, 0.2);
            }
            
            .feature-icon {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 70px;
              height: 70px;
           
              border-radius: 50%;
              margin-bottom: 20px;
              
              i {
                font-size: 30px;
                color: #8B4513;
              }
            }
            
            .feature-content {
              h4 {
                font-size: 20px;
                margin-bottom: 10px;
                color: #333;
              }
              
              p {
                font-size: 15px;
                margin-bottom: 0;
                line-height: 1.5;
              }
            }
          }
        }

        .story-stats {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 30px;
          
          @media (max-width: 768px) {
            grid-template-columns: 1fr;
            gap: 20px;
          }

          .stat-item {
            padding: 30px 20px;
            background-color: #f9f7f4;
            border-radius: 10px;
            transition: all 0.3s;
            text-align: center;
            
            &:hover {
              background-color: rgba(139, 69, 19, 0.1);
              transform: translateY(-5px);
              box-shadow: 0 10px 25px rgba(139, 69, 19, 0.1);
            }
            
            .stat-number {
              display: block;
              font-size: 42px;
              font-weight: bold;
              color: #8B4513;
              margin-bottom: 10px;
            }

                          .stat-label {
                color: #666;
                font-size: 16px;
              }
              
              .stat-growth {
                margin-top: 5px;
                font-size: 14px;
                color: #8D9CAF;
              }
          }
        }
      }
    }
  }

  // 联系我们/商家入驻
  .contact {
    padding: 80px 0;
    background-color: #f9f9f9;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: -50px;
      left: -50px;
      width: 200px;
      height: 200px;
      background-color: rgba(139, 69, 19, 0.05);
      border-radius: 50%;
      z-index: 0;
    }
    
    &::after {
      content: '';
      position: absolute;
      bottom: -80px;
      right: -80px;
      width: 250px;
      height: 250px;
      background-color: rgba(139, 69, 19, 0.05);
      border-radius: 50%;
      z-index: 0;
    }
    
    .section-title {
      position: relative;
      z-index: 1;
      
      &::after {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background-color: #8B4513;
        margin: 15px auto 5px;
      }
    }
    
    .section-subtitle {
      position: relative;
      z-index: 1;
      margin-bottom: 40px;
    }

    .contact-content {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      
      @media (max-width: 992px) {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .contact-info {
        .info-list {
          .info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 25px;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            &:hover {
              transform: translateX(3px);
              box-shadow: 0 8px 20px rgba(139, 69, 19, 0.1);
            }

            .info-icon {
              display: flex;
              align-items: center;
              justify-content: center;
              min-width: 50px;
              height: 50px;
              border-radius: 50%;
              margin-right: 15px;
              overflow: hidden;
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
              
              .img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                padding: 8px;
              }
            }

            .info-text {
              h4 {
                font-size: 18px;
                margin-bottom: 8px;
                color: #333;
              }

              p {
                color: #666;
                font-size: 14px;
                line-height: 1.5;
                margin-bottom: 8px;
              }
              
              .btn-details {
                display: inline-flex;
                align-items: center;
                background: none;
                border: none;
                color: #8B4513;
                font-size: 13px;
                padding: 0;
                cursor: pointer;
                transition: all 0.3s;
                
                &:hover {
                  color: #A0522D;
                  text-decoration: underline;
                }
                
                i {
                  margin-left: 5px;
                  font-size: 11px;
                }
              }
            }
          }
        }
      }

      .contact-form {
        background-color: white;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
        
        &.merchant-apply {
          position: relative;
          
          .apply-title {
            text-align: center;
            font-size: 22px;
            color: #8B4513;
            margin-bottom: 20px;
            position: relative;
            
            &:after {
              content: '';
              position: absolute;
              bottom: -8px;
              left: 50%;
              transform: translateX(-50%);
              width: 40px;
              height: 2px;
              background-color: #8B4513;
            }
          }
          
          .form-decoration {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
            
            .decoration-circle {
              position: absolute;
              border-radius: 50%;
              background-color: rgba(139, 69, 19, 0.03);
              
              &.circle-1 {
                width: 150px;
                height: 150px;
                top: -75px;
                right: -75px;
              }
              
              &.circle-2 {
                width: 100px;
                height: 100px;
                bottom: -50px;
                left: -50px;
              }
            }
          }
        }
        
        form {
          position: relative;
          z-index: 1;
        }
        
        .form-group {
          margin-bottom: 15px;

          input,
          textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #eee;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s;

            &:focus {
              outline: none;
              border-color: #8B4513;
              box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.1);
            }
          }

          textarea {
            height: 120px;
            resize: vertical;
          }
        }

        .btn-submit {
          width: 100%;
          padding: 12px 15px;
          background-color: #8B4513;
          color: #fff;
          border: none;
          border-radius: 8px;
          font-size: 16px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s;
          position: relative;
          overflow: hidden;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s ease;
          }

          &:hover {
            background-color: #A0522D;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(139, 69, 19, 0.2);
            
            &::before {
              left: 100%;
            }
          }
        }
        
        .contact-methods {
          margin-top: 25px;
          padding-top: 15px;
          border-top: 1px dashed #eee;
          position: relative;
          z-index: 1;
          
          h4 {
            font-size: 16px;
            margin-bottom: 12px;
            color: #333;
          }
          
          .method-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            transition: all 0.3s ease;
            padding: 5px 8px;
            border-radius: 5px;
            
            &:hover {
              background-color: rgba(139, 69, 19, 0.05);
              transform: translateX(5px);
            }
            
            i {
              font-size: 16px;
              color: #8B4513;
              margin-right: 10px;
              transition: transform 0.3s ease;
            }
            
            &:hover i {
              transform: scale(1.2);
            }
            
            span {
              color: #666;
              font-size: 15px;
            }
          }
        }
      }
    }
  }

  // 页脚
  .footer {
    background-color: #333;
    color: #fff;
    padding: 80px 0 30px;

    .footer-main {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 60px;
      margin-bottom: 50px;
      
      @media (max-width: 992px) {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .footer-info {
        h3 {
          font-size: 28px;
          margin-bottom: 15px;
          color: #fff;
        }

        p {
          color: #bbb;
          margin-bottom: 25px;
          font-size: 16px;
        }
        
        .footer-social {
          display: flex;
          gap: 15px;
          
          .social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: #fff;
            transition: all 0.3s;
            
            &:hover {
              background-color: #8B4513;
              transform: translateY(-3px);
            }
            
            i {
              font-size: 20px;
            }
          }
        }
      }
      
      .footer-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        
        @media (max-width: 768px) {
          grid-template-columns: repeat(2, 1fr);
        }
        
        @media (max-width: 576px) {
          grid-template-columns: 1fr;
        }
        
        .footer-nav-group {
          h4 {
            font-size: 18px;
            margin-bottom: 20px;
            color: #fff;
            position: relative;
            padding-bottom: 10px;
            
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 30px;
              height: 2px;
              background-color: #8B4513;
            }
          }
          
          ul {
            list-style: none;
            padding: 0;
            margin: 0;
            
            li {
              margin-bottom: 10px;
              
              a {
                color: #bbb;
                text-decoration: none;
                transition: all 0.3s;
                font-size: 15px;
                
                &:hover {
                  color: #fff;
                  padding-left: 5px;
                }
              }
            }
          }
        }
      }
    }

    .footer-bottom {
      text-align: center;
      padding-top: 30px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);

      p {
        color: #999;
        margin: 0;
        font-size: 14px;
      }
    }
  }
}

// 动画
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: rotate(45deg) translateY(0);
  }
  40% {
    transform: rotate(45deg) translateY(-10px);
  }
  60% {
    transform: rotate(45deg) translateY(-5px);
  }
}

@keyframes float-top-right {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(3deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes float-bottom-left {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(15px) rotate(-3deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式设计
@media (max-width: 992px) {
  .official-website {
    .hero {
      padding: 100px 0 60px;
      
      .hero-text {
        .main-title {
          font-size: 36px;
        }

        .sub-title {
          font-size: 18px;
        }
      }
      
      .platforms-display {
        grid-template-columns: 1fr;
      }
    }
    
    .features-grid,
    .showcase-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 768px) {
  .official-website {
    .header {
      .nav {
        display: none; // 在移动端需要添加汉堡菜单
      }
    }
    
    .features-tabs {
      .tabs-header {
        .tab-btn {
          padding: 10px 15px;
          font-size: 16px;
        }
      }
    }
    
    .features-grid,
    .showcase-grid {
      grid-template-columns: 1fr;
    }

    .contact {
      .contact-content {
        grid-template-columns: 1fr;
      }
    }
    
    .section-title {
      font-size: 30px;
    }
    
    .section-subtitle {
      font-size: 16px;
      margin-bottom: 40px;
    }
  }
}

@media (max-width: 576px) {
  .official-website {
    .hero-text {
      .main-title {
        font-size: 32px;
      }
      
      .sub-title {
        font-size: 16px;
      }
    }
    
    .contact-form {
      padding: 25px;
    }
    
    .section-title {
      font-size: 26px;
    }
  }
}

// 小程序定制模块样式
#miniprogram-custom {
  .section-block-title {
    font-size: 32px;
    color: #ff720e;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    font-weight: 600;
    padding-bottom: 15px;
    animation: fadeInUp 0.8s ease forwards;
    
    &::after {
      content: '';
      display: block;
      width: 60px;
      height: 3px;
      background-color: #ff720e;
      margin: 15px auto;
      position: relative;
      z-index: 1;
    }
    
    &::before {
      content: '';
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 1px;
      background-color: rgba(255, 114, 14, 0.2);
    }
  }
  
  .visualization-subtitle {
    animation: fadeInUp 1s ease 0.2s forwards;
    opacity: 0;
    transform: translateY(20px);
    color: #666;
    font-size: 17px;
    margin-bottom: 40px;
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.custom-intro-container {
  margin-bottom: 50px;
  
  .custom-intro-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    
    // 添加装饰性背景
    &::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(139, 69, 19, 0.07) 0%, rgba(139, 69, 19, 0.01) 70%);
      z-index: 0;
    }
    
    &:hover {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transform: translateY(-5px);
    }
    
    @media (max-width: 992px) {
      flex-direction: column;
    }
    
    .custom-intro-text {
      flex: 1;
      min-width: 300px;
      position: relative;
      z-index: 1;
      
      h4 {
        font-size: 28px;
        color: #ff720e;
        margin-bottom: 20px;
        font-weight: 600;
        position: relative;
        margin-top: 0;
        padding-bottom: 15px;
        
        &:after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 60px;
          height: 3px;
          background: linear-gradient(to right, #8B4513, #D2B48C);
          transition: width 0.3s ease;
        }
      }
      
      &:hover h4:after {
        width: 120px;
      }
      
      p {
        color: #555;
        line-height: 1.8;
        margin-bottom: 30px;
        font-size: 16px;
      }
      
      .service-features {
        display: flex;
        flex-direction: column;
        gap: 25px;
        
        .service-feature-item {
          display: flex;
          align-items: flex-start;
          transition: all 0.3s ease;
          padding: 15px;
          border-radius: 10px;
          
          &:hover {
            background-color: rgba(139, 69, 19, 0.03);
            transform: translateX(10px);
          }
          
          .feature-number {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: linear-gradient(135deg, #8B4513, #A0522D);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            margin-right: 18px;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(139, 69, 19, 0.2);
            transition: all 0.3s ease;
          }
          
          &:hover .feature-number {
            transform: scale(1.1) rotate(10deg);
          }
          
          .feature-content {
            flex: 1;
            
            h5 {
              font-size: 20px;
              color: #333;
              margin-bottom: 8px;
              font-weight: 600;
              transition: color 0.3s ease;
            }
            
            p {
              color: #666;
              line-height: 1.7;
              margin-bottom: 0;
              font-size: 15px;
            }
          }
          
          &:hover .feature-content h5 {
            color: #8B4513;
          }
        }
      }
    }
    
    .custom-intro-image {
      flex: 0 0 400px;
      align-self: center;
      position: relative;
      z-index: 1;
      
      @media (max-width: 992px) {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
      }
      
      .image-wrapper {
        width: 100%;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, rgba(139, 69, 19, 0.1) 0%, rgba(139, 69, 19, 0) 50%);
          z-index: 1;
          pointer-events: none;
        }
        
        .custom-image {
          width: 100%;
          height: auto;
          display: block;
          transform: scale(1);
          transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
          
          &:hover {
            transform: scale(1.05);
          }
        }
      }
    }
  }
}

.case-showcase {
  margin-top: 70px;
  
  .case-title {
    font-size: 28px;
    color: #333;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
    font-weight: 600;
    
    &::before {
      content: '';
      position: absolute;
      width: 100px;
      height: 1px;
      background-color: #ddd;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    
    &::after {
      content: '';
      display: block;
      width: 60px;
      height: 3px;
      background: linear-gradient(to right, #8B4513, #D2B48C);
      margin: 0 auto;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      transition: width 0.4s ease;
    }
    
    &:hover::after {
      width: 100px;
    }
  }
  
  .case-content-wrapper {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
    
    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
  
  .case-grid-wrapper {
    flex: 1;
  }

  .case-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
    
    &.side-categories {
      flex-direction: column;
      flex: 0 0 200px;
      justify-content: flex-start;
      align-items: stretch;
      margin-bottom: 0;
      background-color: #faf7f4;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      
      // 添加吸顶样式
      &.sticky-categories {
        position: sticky;
        top: 20px; // 距离顶部20px
        transition: all 0.3s ease;
        max-height: calc(100vh - 40px); // 防止过高
        overflow-y: auto; // 允许滚动
      }
      
      &.animated-categories {
        .category-btn {
          transform: translateX(-10px);
          opacity: 0;
          animation: slideInRight 0.5s forwards;
          
          @for $i from 1 through 5 {
            &:nth-child(#{$i}) {
              animation-delay: $i * 0.1s;
            }
          }
        }
      }
      
      .category-btn {
        text-align: left;
        padding: 14px 20px;
        border-radius: 10px;
        margin-bottom: 12px;
        transition: all 0.3s ease;
        font-weight: 500;
        font-size: 15px;
        border: 1px solid transparent;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        
        .category-text {
          position: relative;
          z-index: 1;
        }
        
        .category-icon {
          width: 20px;
          height: 20px;
          margin-right: 10px;
          position: relative;
          color: #666; /* 默认图标颜色 */
          z-index: 1;
          
          &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: currentColor;
            mask-size: cover;
            -webkit-mask-size: cover;
            transition: transform 0.3s ease;
          }
          
          &.all-icon::before {
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z'/%3E%3C/svg%3E");
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z'/%3E%3C/svg%3E");
          }
          
          &.experience-icon::before {
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z'/%3E%3C/svg%3E");
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z'/%3E%3C/svg%3E");
          }
          
          &.shop-icon::before {
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
          }
          
          &.culture-icon::before {
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.55C9.64 9.35 6.48 8 3 8v11c3.48 0 6.64 1.35 9 3.55 2.36-2.19 5.52-3.55 9-3.55V8c-3.48 0-6.64 1.35-9 3.55zM12 8c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z'/%3E%3C/svg%3E");
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.55C9.64 9.35 6.48 8 3 8v11c3.48 0 6.64 1.35 9 3.55 2.36-2.19 5.52-3.55 9-3.55V8c-3.48 0-6.64 1.35-9 3.55zM12 8c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z'/%3E%3C/svg%3E");
          }
          
          &.photo-icon::before {
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
          }
        }
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 3px;
          background: linear-gradient(to bottom, #8B4513, #D2B48C);
          opacity: 0;
          transition: opacity 0.3s ease;
          z-index: 0;
        }
        
        &.active {
          background-color: #8B4513;
          color: #ffffff;
          border-color: rgba(139, 69, 19, 0.15);
          padding-left: 18px;
          position: relative;
          z-index: 0;
          
          &::before {
            opacity: 1;
          }
          
          .category-icon {
            color: #ffffff !important; /* 强制使用白色 */
          }
          
          .category-icon::before {
            transform: scale(1.2);
          }
        }
        
        &:hover:not(.active) {
          padding-left: 25px;
          background-color: rgba(139, 69, 19, 0.03);
          
          .category-icon {
            color: #8B4513;
          }
          
          .category-icon::before {
            transform: scale(1.1);
          }
        }
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .category-btn {
      padding: 10px 20px;
      background-color: #f8f8f8;
      border: 1px solid #e0e0e0;
      border-radius: 20px;
      font-size: 15px;
      color: #666;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        background-color: #8B4513;
        transition: width 0.3s;
      }
      
      &:hover {
        color: #8B4513;
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
        
        &::before {
          width: 100%;
        }
      }
      
      &.active {
        background-color: rgba(139, 69, 19, 0.08);
        color: #8B4513;
        font-weight: 500;
        border-color: rgba(139, 69, 19, 0.2);
        
        &::before {
          width: 100%;
        }
      }
    }
  }
  
  .category-btn {
    padding: 10px 20px;
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 15px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background-color: #8B4513;
      transition: width 0.3s;
    }
    
    &:hover {
      color: #8B4513;
      transform: translateY(-2px);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
      
      &::before {
        width: 100%;
      }
    }
    
    &.active {
      background-color: #8B4513;
      color: #ffffff;
      font-weight: 500;
      border-color: rgba(139, 69, 19, 0.2);
      
      &::before {
        width: 100%;
      }
    }
  }
}

/* 案例淡入动画 */
.case-fade-enter-active, .case-fade-leave-active {
  transition: all 0.5s ease;
}
.case-fade-enter-from, .case-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.case-fade-move {
  transition: transform 0.5s ease;
}

@keyframes slideInRight {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 案例网格样式 */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  
  .case-item {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    margin-bottom: 30px; /* 增加底部间距 */
    min-height: 680px; /* 确保足够高度容纳增高的手机图片 */
    
  
    
    &:hover {
      .case-info h5 {
        color: #8B4513;
      }
    }
    
    .case-image:hover {
      .case-overlay {
        opacity: 1;
        visibility: visible;
      }
    }
    
    .case-image {
        position: relative;
        overflow: hidden;
        width: 280px; /* 控制宽度 */
        height: 600px; /* 增加高度以完整显示图片内容 */
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      margin: 15px auto 0; /* 居中显示并添加顶部间距 */
      border-radius: 20px; /* 圆角效果 */
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
      border: 1px solid rgba(0, 0, 0, 0.1); /* 细微边框 */
      background-color: #000; /* 手机外框颜色 */
      padding: 5px; /* 手机边框效果 */
      
      img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 改为contain，确保图片完整显示不被裁剪 */
        border-radius: 20px; /* 手机屏幕圆角 */
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        background-color: white; /* 图片背景色 */
      }
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        
        img {
          transform: scale(1.03);
        }
      }
      
      .case-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, 
          rgba(0, 0, 0, 0.7) 0%,
          rgba(139, 69, 19, 0.8) 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
        border-radius: 20px; /* 与图片圆角保持一致 */
        backdrop-filter: blur(3px);
        
        .overlay-btn {
          margin-top: 25px;
          background: linear-gradient(135deg, #8B4513, #A0522D);
          border: none;
          padding: 12px 28px;
          border-radius: 30px;
          font-weight: 500;
          font-size: 16px;
          letter-spacing: 1px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
          transform: translateY(20px);
          opacity: 0;
          transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition-delay: 0.1s;
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          cursor: pointer;
          
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
            border-radius: 30px;
          }
          
          .edit-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            margin-right: 8px;
            transition: transform 0.3s ease;
          }
          
          span {
            position: relative;
            z-index: 2;
          }
          
          &:hover {
            background: linear-gradient(135deg, #A0522D, #CD853F);
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            
            .edit-icon {
              transform: rotate(15deg);
            }
          }
          
          &:active {
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            background: linear-gradient(135deg, #8B4513, #964B00);
          }
        }
        
        h5 {
          color: white;
          font-size: 22px;
          margin-bottom: 10px;
          transform: translateY(-20px);
          opacity: 0;
          transition: all 0.5s ease;
          transition-delay: 0s;
          font-weight: 600;
          text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        p {
          color: rgba(255, 255, 255, 0.9);
          text-align: center;
          font-size: 15px;
          transform: translateY(-15px);
          opacity: 0;
          transition: all 0.5s ease;
          transition-delay: 0.05s;
          max-width: 90%;
          line-height: 1.6;
        }
      }
      
      &:hover .case-overlay {
        h5, p, .overlay-btn {
          transform: translateY(0);
          opacity: 1;
        }
      }
    }
    
          .case-info {
        padding: 20px;
        text-align: center;
        
        h5 {
          font-size: 19px;
          margin-bottom: 10px;
          color: #333;
          font-weight: 600;
          transition: color 0.3s ease;
        }
        
        p {
          color: #666;
          font-size: 15px;
          line-height: 1.6;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          height: 48px; /* 确保高度一致 */
        }
      }
  }
}

.view-more-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 40px;
  
  .view-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 35px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    color: #8B4513;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.1), transparent);
      transition: all 0.5s ease;
    }
    
    &:hover {
      background-color: rgba(139, 69, 19, 0.05);
      border-color: #8B4513;
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(139, 69, 19, 0.15);
      
      &::before {
        left: 100%;
      }
      
      .view-more-icon {
        transform: rotate(45deg) scale(1.2);
      }
    }
    
    &:active {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(139, 69, 19, 0.1);
    }
    
    .view-more-icon {
      width: 10px;
      height: 10px;
      border-right: 2px solid #8B4513;
      border-bottom: 2px solid #8B4513;
      transform: rotate(45deg);
      margin-left: 15px;
      transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 2px;
        background-color: transparent;
        top: 4px;
        left: -2px;
        transition: all 0.3s;
      }
      
      &.is-expanded {
        transform: rotate(-135deg);
      }
    }
  }
}
</style> 